<!DOCTYPE html>
<html>
<head>
    <title>Simple Harmonic Motion Graph</title>
</head>
<body>
    <canvas id="physics-canvas" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Parameters for the coordinate system
        const origin = { x: 70, y: 175 };
        const scale = { x: 25, y: 250 }; // pixels per unit (s, m)

        // Function to convert graph coordinates to canvas coordinates
        function toCanvasCoords(t, y) {
            return {
                x: origin.x + t * scale.x,
                y: origin.y - y * scale.y
            };
        }

        // Clear canvas
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Set drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Draw Axes
        // Y-axis
        ctx.beginPath();
        ctx.moveTo(origin.x, 320);
        ctx.lineTo(origin.x, 20);
        ctx.lineTo(origin.x - 5, 30);
        ctx.moveTo(origin.x, 20);
        ctx.lineTo(origin.x + 5, 30);
        ctx.stroke();

        // X-axis
        ctx.beginPath();
        ctx.moveTo(10, origin.y);
        ctx.lineTo(430, origin.y);
        ctx.lineTo(420, origin.y - 5);
        ctx.moveTo(430, origin.y);
        ctx.lineTo(420, origin.y + 5);
        ctx.stroke();

        // Draw Labels and Ticks
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.textAlign = 'center';
        
        // Y-axis label
        ctx.fillText('y/m', origin.x + 10, 20);

        // X-axis label
        ctx.fillText('t/s', 420, origin.y + 25);
        
        // Numeric labels
        ctx.font = '18px Arial';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        
        // Y-axis ticks and labels
        let y_val_0_40 = toCanvasCoords(0, 0.40).y;
        ctx.fillText('0.40', origin.x - 10, y_val_0_40);
        ctx.beginPath();
        ctx.moveTo(origin.x, y_val_0_40);
        ctx.lineTo(origin.x + 5, y_val_0_40);
        ctx.stroke();

        let y_val_0_20 = toCanvasCoords(0, 0.20).y;
        ctx.fillText('0.20', origin.x - 10, y_val_0_20);

        // Origin label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('0', origin.x - 10, origin.y + 5);
        
        // X-axis ticks and labels
        let x_val_5_0 = toCanvasCoords(5.0, 0).x;
        ctx.fillText('5.0', x_val_5_0, origin.y + 10);

        // Draw the sinusoidal curve
        // Equation y(t) = A*sin(ω*t + φ)
        // From the graph: A = 0.40
        // y(0) = 0.20 => 0.20 = 0.40*sin(φ) => sin(φ) = 0.5. Since slope is positive at t=0, φ = π/6.
        // y(5) = 0 => 0 = 0.40*sin(ω*5 + π/6). From graph, phase at t=5 is π.
        // So, 5ω + π/6 = π => 5ω = 5π/6 => ω = π/6.
        // Equation: y(t) = 0.40 * sin( (π/6)*t + π/6 )
        
        ctx.beginPath();
        const t_start = 0;
        const t_end = 14.5;
        const dt = 0.05;

        for (let t = t_start; t <= t_end; t += dt) {
            const y = 0.40 * Math.sin((Math.PI / 6) * t + Math.PI / 6);
            const p = toCanvasCoords(t, y);
            if (t === t_start) {
                ctx.moveTo(p.x, p.y);
            } else {
                ctx.lineTo(p.x, p.y);
            }
        }
        ctx.stroke();

    </script>
</body>
</html>